<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>CSS3 水波纹案例</title>
</head>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	.wapper{
		width: 50px;
		height: 50px;
		background-color: white;
		border: 5px solid black;
		border-radius: 50%;
		margin: 100px auto;
		position: relative;
		overflow: hidden;
	}
	.wapper .wave{
		position: absolute;
		width: 150px;
		height: 150px;
		background-color: blue;
		opacity: 0.7;
		border-radius: 50px;
		animation: wave 2s infinite alternate;
	}
	.wapper .wave1{
		top: 20px;
		left: -10px;
	}
	.wapper .wave2{
		top: 10px;
		left: 0;
		opacity: 0.5;
		animation-delay: 0.2s;
	}
	@keyframes wave{
		
		to{
			transform: rotate(1turn);
		}
	}
</style>
<body>
	<div class="wapper">
		<div class="wave wave1"></div>
		<div class="wave wave2"></div>
		<div></div>
	</div>
</body>
</html>